<template>
	<view class="pratice" v-if="final.length>0">
		 <view class="toAnswer">
		 	<view class="topic" v-if="final.quesType">
		 		<text v-if="questionNum">{{questionNum}}</text>
		 		<text v-if="final.quesType&&final.quesType==1">、【单选题】</text>
		 		<text v-if="final.quesType==2">、【多选题】</text>
		 		<text v-if="final.quesType==3">、【判断题】</text>
				<rich-text class="richText" v-if='final.quesContent' :nodes="final.quesContent"></rich-text>
		 	</view>
		 	
		 	<view class="topinOptions" v-if="final.length>0">
		 		<!-- 单选 -->
		 		<radio-group v-if=" final.quesType==1" @change="radioChange">
		 		    <view v-for="(item, index) in final.options" :key="index">
		 		        <view class="options" @click="redioCheck(index) " >
		 					 <radio disabled :value="alphabet[index]" :color="color" :checked="alphabet[index]==radioValue" ></radio>
		 					 <text >{{alphabet[index]}} 、{{item}}</text>
		 		        </view>
		 		    </view>
		 		</radio-group>
		 		
		 		<!-- 判断 -->
		 		<radio-group v-if=" final.quesType==3" @change="radioChange">
		 		    <view v-for="(item, index) in final.options" :key="index">
		 		        <view class="options" @click="redioCheck(index) " >
		 					 <radio disabled :value="alphabet[index]" :color="color" :checked="alphabet[index]==radioValue" ></radio>
		 					 <text >{{alphabet[index]}} 、{{item=='Y'?"正确":"错误"}}</text>
		 		        </view>
		 		    </view>
		 		</radio-group>
		 		
		 		<!-- 多选 -->
		 		<checkbox-group v-if="final.quesType==2" @change="checkboxChange">
		 			<view v-for="(item, index) in final.options" :key="index">
		 				<view class="options" @click="checkboxCheck(index)" >
		 					<checkbox disabled :value="alphabet[index]"  :color="color" :checked="checkboxValue.some(item=>item==alphabet[index])"></checkbox>
		 					<text>{{alphabet[index]}} 、{{item}}</text>
		 				</view>
		 			</view>
		 		</checkbox-group>
				<view class="answer" v-if='final' >
					<text v-if="isRight" style="color:blue">回答正确</text>
					<text v-else style="color:#FF0000 ;"> 回答错误</text>
					<view class="myAnswer">
						<text >参考答案: </text>
						<text style="color:#007AFF;font-weight: bold;" v-if="final&&final.answer">{{final.answer}}</text>
						<text style="margin-left: 60rpx;">我的答案: </text>
						<text style="color: #007AFF;font-weight: bold;" v-if="final.userAnswer &&isRight">{{final.userAnswer}}</text>
						<text style="color: #FF0000;font-weight: bold;" v-if="final.userAnswer &&!isRight">{{final.userAnswer}}</text>
					</view>
				</view>
		 	</view>
		 	
		 </view>
		 
		 <view class="switch">
		 	<view @click="toAgo()" >上一题</view>
		 	<view @click="toGo()">下一题</view>
		 </view>
	</view>
</template>

<script>
	import {getRecordQuestionDetail} from '@/api/record/record.js'
	export default {
		name:'pratice',
		props:['filterFinal','questionIndex','alldetail','record_id'],
		data() {
			return {
				kind:'',
				questionNum:null,
				alphabet:['A','B','C','D','E','F','G','H','I','J','K','L','M','N'],
				options:[],
				radioValue:null ,//标记是否被点击
				checkboxValue:[],
				first:[],
				myAnswer:'',
				color:'#4E74DC',
				index:null,
				right:false,
				isDisabled:false,
				isChecked:false,
				final:null,
				examRecordId:0,
				isRight:false
			}
		},
	
		created(){
			this.final = this.filterFinal
			// console.log(this.final,'this.final')
			this.alldata = this.alldetail
			this.examRecordId = this.record_id
			this.filter_first()
			this.questionNum =  parseInt(this.questionIndex)
			this.radioValue = this.final.userAnswer
			this.judgeAnswer()
			// console.log(this.questionNum,'this.questionNum')
			// console.log(this.final,'this.final')
			// console.log(this.final[this.questionNum-1],'final[questionNum-1].quesContent')
		},
		mounted() {
			
		},
		methods: {
			//对传递的数据处理
			filter_first(){
			
				if(this.final.answer == 'Y'){
					this.final.answer = 'A'
				}else if(this.final.answer == 'N'){
					this.final.answer = 'B'
				}
				if(this.final.userAnswer == 'Y'){
					this.final.userAnswer = 'A'
				}else if(this.final.userAnswer == 'N'){
					this.final.userAnswer = 'B'
				}
				if(this.final.userAnswer ==''){
					this.checkboxValue = []
				}else {
					this.checkboxValue = this.final.userAnswer.split("")
				}
			},
			//对查询的数据处理
			filter(){
				this.final.quesContent = this.replaceDetail(this.final.quesContent)
				this.final.options = this.final.options.split('|'),
				this.final.answer = this.final.answer.replace(/[|]/g,"")
				this.final.userAnswer = this.final.userAnswer.replace(/[|]/g,"")
				this.filter_first()
				
			},
			//对富文本中的图片显示限制大小
			replaceDetail(details){
				var texts='';//待拼接的内容
				while(details.indexOf('<img')!=-1){//寻找img 循环
					texts+=details.substring('0',details.indexOf('<img')+4);//截取到<img前面的内容
					details = details.substring(details.indexOf('<img')+4);//<img 后面的内容
					if(details.indexOf('style=')!=-1 && details.indexOf('style=')<details.indexOf('>')){
						texts+=details.substring(0,details.indexOf('style="')+7)+"max-width:100%;height:auto;margin:0 auto;";//从 <img 后面的内容 截取到style= 加上自己要加的内容
						details=details.substring(details.indexOf('style="')+7); //style后面的内容拼接
					}else{
						texts+=' style="max-width:100%;height:auto;margin:0 auto;" ';
					}
				}
				texts+=details;//最后拼接的内容
				return texts
			},
			//<radio-group> 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}
			//返回选项的value值
			radioChange(value){
			
			},
			
			//单选自定义选择可取消
			redioCheck(index){
			
			},
			
			checkboxCheck(index){
			
			},
			// 判断答题是否正确
			judgeAnswer(){
				this.isRight = this.alldata[this.questionNum-1].isRight
				if(this.isRight){
					this.color = '#4E74DC'
				}else {
					this.color = '#FF6C6C'
				}
			},
			
			
			//上一题
			toAgo(){
				if(parseInt(this.questionNum)>1){
					this.questionNum = parseInt(this.questionNum) -1
					this.alldata.forEach(item =>{
						if(item.quesSort == this.questionNum){
							
							this.examDetailId = item.examDetailId
						}
					})
					var dataAgo ={
						examRecordId:this.examRecordId,
						examDetailId:this.examDetailId,
						sort :this.questionNum
					}
					getRecordQuestionDetail(dataAgo).then(res=>{
						if(res.data!=null ){
							this.final = res.data
							this.filter()
						} 
						if(this.final.userAnswer){
							this.radioValue = this.final.userAnswer
							this.judgeAnswer()
						}else{
							this.radioValue = null
							this.checkboxValue = []
						}
						
					})
					
					// this.answer= false
				}else{
					uni.showToast({
						icon: "none",
						title: "已到第一题",
						mask: true
					})
				}
			},
			
			//下一题
			toGo(){
				this.examRecordId = this.examRecordId
				if(this.questionNum<this.alldata.length){
					this.questionNum = parseInt(this.questionNum)+1
					this.alldata.forEach(item =>{
						if(item.quesSort == this.questionNum){
							this.examDetailId = item.examDetailId
						}
					})
					var dataGo ={
						examRecordId:this.examRecordId,
						examDetailId:this.examDetailId,
						sort :this.questionNum
					}
					getRecordQuestionDetail(dataGo).then(res=>{
						if(res.data!=null ){
							this.final = res.data
							this.filter()
							console.log(this.final,'final')
						}
						if(this.final.userAnswer){
							this.radioValue = this.final.userAnswer
							// this.checkboxValue = this.final.userAnswer
							this.judgeAnswer()
						}else{
							this.radioValue = null
							this.checkboxValue = []
						}
					})
					
					
				}else{
					uni.showToast({
						icon: "none",
						title: "已到最后一题",
						mask: true
					})
				}
			}
		}
	}
</script>

<style scoped  lang="scss">
	// .pratice{
	// 	position: relative;
	// }
	.top{
		background-color:#FF4848;
		margin-top: -2px;
		height: 40px;
		text{
			display:inline-block;
			margin:15px 30px 0px 20px;
		}
	}
	.toAnswer{
		height: 500px;
		/* border: 1px solid #000000; */
		// border-radius: 5px;
		margin:10px 12px;
		// box-shadow: 0px 0px 5px 2.5px #EBEDEE;
		font-size:15px;
		.topic{
			padding: 10px 20px;
		}
		.topinOptions{
			padding: 10px 20px;
			.options{
				margin:5px 0 ;
			}
		}
	}
	
	.answer{
		height: 57px;
		width: 90%;
		border-top: 1px solid #E6E4E4;
		margin: 100rpx auto;
		padding-top: 20rpx;
		.myAnswer{
			background-color: #F0F0F0;
			font-size: 28rpx;
			height: 106rpx;
			line-height: 106rpx;
			border-radius: 6.3;
			padding-top: 5px;
			margin-top: 20rpx;
			text{
				display: inline-block;
				padding-left: 20rpx;
			}
		}
		
	}
	.switch{
		position: absolute;
		text-align: center;
		margin-top: 30px;
		display: flex;
		border: 1px solid #F0F0F0;
		width: 100%;
		// bottom: 20;
		view{
			height: 100rpx;
			line-height: 100rpx;
			width: 50%;
			border-left: 1px solid #F0F0F0;
			background-color:#FFFFFF;
			font-size:15px;
		}
	}
	
	.richText /deep/ div{
		display: inline;
	}
</style>
